<template>
	<view class="user-container">
		<!-- 用户信息区 -->
		<view class="user-info-section">
			<view class="info-content">
				<view class="avatar-wrapper" :class="{'pulse-animation': !userInfo.id}">
					<image class="avatar" :src="userInfo.avatar ? getImageUrl(userInfo.avatar) : '/static/default-avatar.jpg'" mode="aspectFill"></image>
				</view>
				<view class="user-detail" v-if="userInfo.id">
					<view class="nickname">{{userInfo.nickname || '游客'}}</view>
					<view class="phone" v-if="userInfo.phone">{{formatPhone(userInfo.phone)}}</view>
				</view>
				<view class="login-btn" v-else @click="goToLogin">
					<text>点击登录</text>
				</view>
			</view>
			<view class="wave-shape"></view>
			<view class="user-info-background-pattern"></view>
		</view>
		
		<!-- 菜单区 -->
		<view class="menu-section">
			<view class="menu-group">
				<view class="menu-item menu-item-animation" @click="navigateTo('/pages/my/reservation-list/index')">
					<view class="menu-icon-box">
						<view class="menu-icon-circle reservation-bg"></view>
						<view class="menu-icon-inner">预</view>
					</view>
					<text class="menu-title">我的预约</text>
					<view class="arrow-right"></view>
				</view>
				
				<view class="menu-item menu-item-animation" @click="navigateTo('/pages/my/visitor-list/index')">
					<view class="menu-icon-box">
						<view class="menu-icon-circle visitor-bg"></view>
						<view class="menu-icon-inner">客</view>
					</view>
					<text class="menu-title">常用观众</text>
					<view class="arrow-right"></view>
				</view>
				
				<view class="menu-item menu-item-animation" @click="navigateTo('/pages/my/profile/index')">
					<view class="menu-icon-box">
						<view class="menu-icon-circle profile-bg"></view>
						<view class="menu-icon-inner">我</view>
					</view>
					<text class="menu-title">个人资料</text>
					<view class="arrow-right"></view>
				</view>
			</view>
			
			<view class="menu-group" v-if="userInfo.id">
				<view class="menu-item logout menu-item-animation" @click="handleLogout">
					<text class="menu-title logout-text">退出登录</text>
				</view>
			</view>
		</view>
		
		<!-- 版本信息 -->
		<view class="version-info">
			<text>版本 1.0.0</text>
			<view class="divider">
				<view class="divider-line"></view>
				<view class="divider-dot"></view>
				<view class="divider-line"></view>
			</view>
			<text>博物馆小程序</text>
		</view>
	</view>
</template>

<script>
	import { getImageUrl } from '@/api/file.js';
	
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		onShow() {
			// 每次进入页面获取最新的用户信息
			this.getUserInfo();
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					this.userInfo = userInfo;
					console.log(this.userInfo);
					
				} else {
					this.userInfo = {};
				}
			},
			
			// 格式化手机号
			formatPhone(phone) {
				if (!phone) return '';
				return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			},
			
			// 跳转到登录页
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				});
			},
			
			// 通用导航方法
			navigateTo(url) {
				// 检查登录状态
				if (!this.userInfo.id) {
					this.goToLogin();
					return;
				}
				
				uni.navigateTo({
					url: url
				});
			},
			
			// 退出登录
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('userInfo');
							uni.removeStorageSync('token');
							this.userInfo = {};
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							});
						}
					}
				});
			},
			
			// 获取图片完整路径
			getImageUrl
		}
	}
</script>

<style lang="scss">
	.user-container {
		min-height: 100vh;
		background-color: #f8f9fa;
		padding-bottom: 40rpx;
		
		.user-info-section {
			position: relative;
			overflow: hidden;
			padding: 80rpx 40rpx 100rpx;
			background: linear-gradient(135deg, #4a6bdf, #644ae8);
			
			.info-content {
				position: relative;
				z-index: 2;
				display: flex;
				align-items: center;
			}
			
			.avatar-wrapper {
				margin-right: 30rpx;
				position: relative;
				
				.avatar {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
					border: 4rpx solid rgba(255, 255, 255, 0.8);
					box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
					z-index: 2;
					position: relative;
				}
				
				// .avatar-border {
				// 	position: absolute;
				// 	top: -8rpx;
				// 	left: -8rpx;
				// 	right: -8rpx;
				// 	bottom: -8rpx;
				// 	border-radius: 50%;
				// 	border: 2rpx solid rgba(255, 255, 255, 0.5);
				// 	z-index: 1;
				// }
			}
			
			.user-detail {
				color: #ffffff;
				
				.nickname {
					font-size: 38rpx;
					font-weight: bold;
					margin-bottom: 16rpx;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
				}
				
				.phone {
					font-size: 28rpx;
					opacity: 0.9;
					background-color: rgba(255, 255, 255, 0.2);
					padding: 8rpx 20rpx;
					border-radius: 30rpx;
				}
			}
			
			.login-btn {
				color: #ffffff;
				font-size: 38rpx;
				font-weight: bold;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
			}
			
			.wave-shape {
				position: absolute;
				bottom: -2rpx;
				left: 0;
				right: 0;
				height: 40rpx;
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100"><path fill="%23f8f9fa" fill-opacity="1" d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,100L1360,100C1280,100,1120,100,960,100C800,100,640,100,480,100C320,100,160,100,80,100L0,100Z"></path></svg>');
				background-size: cover;
				background-position: center bottom;
				z-index: 1;
			}
			
			.user-info-background-pattern {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="%23ffffff" fill-opacity="0.05" d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z"></path></svg>');
				background-position: center;
				opacity: 0.5;
			}
		}
		
		.menu-section {
			padding: 30rpx;
			margin-top: -50rpx;
			
			.menu-group {
				background-color: #ffffff;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				overflow: hidden;
				box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06);
				
				.menu-item {
					display: flex;
					align-items: center;
					height: 110rpx;
					padding: 0 30rpx;
					border-bottom: 1px solid #f0f0f0;
					position: relative;
					
					&:last-child {
						border-bottom: none;
					}
					
					.menu-icon-box {
						width: 70rpx;
						height: 70rpx;
						margin-right: 30rpx;
						position: relative;
						
						.menu-icon-circle {
							width: 100%;
							height: 100%;
							border-radius: 50%;
							position: absolute;
							top: 0;
							left: 0;
						}
						
						.menu-icon-inner {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #fff;
							font-size: 28rpx;
							font-weight: bold;
						}
					}
					
					.reservation-bg {
						background: linear-gradient(135deg, #ff9500, #ff7643);
						box-shadow: 0 4rpx 10rpx rgba(255, 149, 0, 0.3);
					}
					
					.visitor-bg {
						background: linear-gradient(135deg, #5ac8fa, #30b3eb);
						box-shadow: 0 4rpx 10rpx rgba(90, 200, 250, 0.3);
					}
					
					.profile-bg {
						background: linear-gradient(135deg, #ff2d55, #e6194b);
						box-shadow: 0 4rpx 10rpx rgba(255, 45, 85, 0.3);
					}
					
					.menu-title {
						flex: 1;
						font-size: 32rpx;
						color: #333;
						font-weight: 500;
					}
					
					.arrow-right {
						width: 16rpx;
						height: 16rpx;
						border-top: 3rpx solid #ccc;
						border-right: 3rpx solid #ccc;
						transform: rotate(45deg);
						margin-right: 6rpx;
						transition: all 0.3s;
					}
					
					&.logout {
						justify-content: center;
						height: 100rpx;
						
						.logout-text {
							color: #ff3b30;
							font-size: 32rpx;
							flex: 0 0 auto;
							font-weight: 500;
							position: relative;
							
							&::after {
								content: '';
								position: absolute;
								bottom: -6rpx;
								left: 0;
								width: 100%;
								height: 2rpx;
								background-color: #ff3b30;
								transform: scaleX(0);
								transition: transform 0.3s;
							}
						}
						
						&:active .logout-text::after {
							transform: scaleX(1);
						}
					}
					
					&::after {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background-color: rgba(0, 0, 0, 0.02);
						opacity: 0;
						transition: opacity 0.3s;
					}
					
					&.menu-item-animation:active {
						&::after {
							opacity: 1;
						}
						
						.arrow-right {
							transform: rotate(45deg) translateX(6rpx);
						}
					}
				}
			}
		}
		
		.version-info {
			text-align: center;
			padding: 40rpx 0;
			color: #999;
			font-size: 24rpx;
			
			.divider {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 20rpx 0;
				
				.divider-line {
					width: 60rpx;
					height: 1rpx;
					background-color: #ddd;
				}
				
				.divider-dot {
					width: 6rpx;
					height: 6rpx;
					border-radius: 50%;
					background-color: #999;
					margin: 0 10rpx;
				}
			}
		}
	}
	
	@keyframes pulse {
		0% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.05);
		}
		100% {
			transform: scale(1);
		}
	}
	
	.pulse-animation {
		animation: pulse 2s infinite ease-in-out;
	}
</style> 